<template>
	<div class="box" >
        <m-header v-for="(item, index) in pageTree[type.myheader]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.myheader}"></m-header>
        <m-content v-for="(item, index) in pageTree[type.content]" :key="index" v-sdrag:real="{id: item.id, com: item.id, type: type.content}"></m-content>
	</div>
</template>

<script>
    import myheader from "./header";
    import content from './content'
    import { mapGetters } from "vuex";
    import { getPageTree, initDomTree } from "../../utils/getPageTree";
    export default {
        // name: 'CommodityDetail',
        data() {
            return {
                page: "SurroundingStores",
                type: {
                    myheader: "myheader",
                    content: "content",
                }
            }
        },
        computed: {
            ...mapGetters([
                "getDomTree"
            ]),
            pageTree() {
                return getPageTree(this, this.page);
            }
        },
        components: {
            "m-header": myheader,
            "m-content": content,
        },
        created() {

        },
        mounted() {
            initDomTree(this.getDomTree[this.page]);
        },
        updated() {
            initDomTree(this.getDomTree[this.page]);
        },
        watch: {
            getDomTree() {
                console.log("页面更新完毕");
                initDomTree(this.getDomTree[this.page]);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .box {
        /* display: flex; */
    }
</style>